<template>
  <van-card
      v-for="user in userList"
      :desc="user?.profile"
      :title="`${user?.username}(${user?.planetCode})`"
      :thumb="user?.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in tags" style="margin-right: 8px; margin-top: 8px">
        {{ tag }}
      </van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
    <van-empty v-if="!userList || userList.length < 1" description="搜索结果为空"/>
  </van-card>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from '../plugins/myAxios';
import 'vant/es/toast/style';
import {showToast} from "vant";
import qs from 'qs'

const route = useRoute();
const {tags} = route.query;
const userList = ref([]);
// const mockUser = {
//   id: 12345,
//   username: '鱼皮',
//   userAccount: '12314',
//   profile: '一名精神小伙，目前还有头发，谢谢大家，阿爸爸阿爸爸阿巴阿巴阿巴',
//   avatarUrl: 'https://636f-codenav-8grj8px727565176-1256524210.tcb.qcloud.la/img/logo.png',
//   gender: 0,
//   phone: '13113113111',
//   email: '592342843721987@xzcxzczxcz.com',
//   userRole: 0,
//   planetCode: '1234',
//   tags: ['java', 'emo', '打工中', 'emo', '打工中'],
//   createTime: new Date(),
// }
onMounted(async () => {
  const userListData = await myAxios.get('/user/search/tags', {
    withCredentials: false,
    params: {
      tagNameList: tags
    },
    //序列化
    paramsSerializer: {
      serialize: params => qs.stringify(params, {indices: false}),
    }
  }).then(function (response: any) {
    console.log('/user/search/tags succeed', response);
    showToast('请求成功');
    return response.data;
  }).catch(function (error: any) {
    console.log('/user/search/tags error', error);
    showToast({
      type: 'fail',
      message: '请求失败',
    })
  })
  console.log(userListData);
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData;
  }
})

</script>


<style scoped>

</style>